<template>
    <div class="box_bg">
        <div class="components_searchs" @keyup.enter="queryTable">
            <el-form :inline="true" :model="table.queryParams" class="demo-form-inline" ref="from" label-width="60px">
                <el-form-item label="学校：">
                    <el-select v-model="table.queryParams.schoolId" clearable filterable placeholder="请选择学校" @change="changeSchool">
                        <el-option
                            v-for="item in schoolList"
                            :key="item.id"
                            :label="item.text"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="学院：">
                    <el-select v-model="table.queryParams.secondSchoolId" clearable placeholder="请选择学院" @change="changeSecondSchool">
                        <el-option
                            v-for="item in secondSchoolList"
                            :key="item.id"
                            :label="item.text"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="专业：">
                    <el-select v-model="table.queryParams.professionId" clearable placeholder="请选择专业" @change="changeProfession">
                        <el-option v-for="item in professionList" :key="item.id" :label="item.text" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item><el-button type="primary" icon="el-icon-search" size="mini" @click="queryTable">查询</el-button></el-form-item>
                <el-form-item><el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button></el-form-item>
                <el-form-item><el-button type="primary" icon="el-icon-edit-outline" size="mini" @click="showMoreSearch">高级搜索</el-button></el-form-item>

                <div v-show = "moreSearchDisplay" class="components_searchs" @keyup.enter="queryTable">
                    <el-form-item label="班级：">
                        <el-select v-model="table.queryParams.classId" clearable placeholder="请选择班级">
                            <el-option
                                v-for="item in classList"
                                :key="item.id"
                                :label="item.text"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="班级：">
                        <el-input v-model="table.queryParams.courseKey" auto-complete="off" placeholder="请输入课程编号/名称"></el-input>
                    </el-form-item>
                </div>
            </el-form>
        </div>

        <!--
        <div class="components_btns">
            <el-button
                type="primary"


                icon="el-icon-plus"
                size="mini"
                @click="showAddClassDialog"
                >
            新增
            </el-button>
                <el-button type="primary" size="mini">
                <i class="el-icon-upload el-icon-right"></i>
                    导出
                </el-button>
        </div>
        -->
        <vue-table
            :api-url="table.apiUrl"
            :fields="table.fields"
            :appendParams="table.queryParams"
            :content="self"
            ref="comprehensiveScoreTable">
        </vue-table>

        <comprehensive-score-detail ref="comprehensiveScoreDetail"></comprehensive-score-detail>
        <comprehensive-score-add ref="comprehensiveScoreAdd"></comprehensive-score-add>
        <course-assessment-detail ref="courseAssessmentDetail"></course-assessment-detail>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    import comprehensiveScoreDetail from './comprehensive-score-detail'
    import comprehensiveScoreAdd from './comprehensive-score-add'
    import courseAssessmentDetail from '../courseassessmentscheme/course-assessment-detail'
    export default {
        components: {
            comprehensiveScoreDetail,comprehensiveScoreAdd,courseAssessmentDetail,
        },
        data() {
            return {
                self: this,
                moreSearchDisplay: false,
                table: {
                    apiUrl: api.studentComprehensiveScore.query,
                    queryParams: {
                        schoolId: null,
                        secondSchoolId: null,
                        professionId: null,
                        classId:null,     // 班级
                        courseKey:null,   // 课程名称/编号
                    },
                    fields: [
                        {
                            prop: "__index",
                            label: "序号",
                        },
                        {
                            prop: "schoolName",
                            label: "学校",
                        },
                        {
                            prop: "secondSchoolName",
                            label: "院系",
                        },
                        {
                            prop: "professionName",
                            label: "专业",
                        },
                        {
                            prop: "className",
                            label: "班级",
                        },
                        {
                            prop: "courseName",
                            label: "课程名称",
                        },
                        {
                            prop: "selectiveType",
                            label: "类型",
                            formatter : function(row, column, cellValue){
                                if(row.selectiveType == 0){
                                    return "必修";
                                }else if(row.selectiveType == 1){
                                    return "选修";
                                }
                            }
                        },
                        {
                            prop: "__component",
                            label: "考核方案",
                            componentName:"qualificationpPograms"
                        },
                        {
                            prop: "studentNums",
                            label: "录入情况",
                            formatter : function(row, column, cellValue){
                                var recordStudent = row.recordStudent? row.recordStudent:0;
                                var totalStudent = row.totalStudent? row.totalStudent:0;
                                return recordStudent+'/'+totalStudent
                            }
                        },
                        {
                            prop: "maxScore",
                            label: "最高分",
                        },
                        {
                            prop: "minScore",
                            label: "最低分",
                        },
                        {
                            prop: "avgScore",
                            label: "平均成绩",
                        },
                        {
                            prop: "__action",
                            label: "操作",
                            width: '150px',
                            actions: [
                                {
                                    label: "录入",
                                    type: "edit",
                                    auth:'',
                                    func: function(vm, row) {
                                       vm.$refs.comprehensiveScoreAdd.showDialog(row.classId,row.courseNo,row.trainPlanCourseId);
                                    }
                                },
                                {
                                    label: "统计成绩",
                                    type: "edit",
                                    auth:'',
                                    func: function(vm, row) {
                                       vm.$refs.comprehensiveScoreDetail.showDialog(row.classId,row.courseNo);
                                    }
                                },
                                {
                                    label: "详情",
                                    type: "edit",
                                    auth:'comprehensiveScore:detail',
                                    func: function(vm, row) {
                                       vm.$refs.comprehensiveScoreDetail.showDialog(row.classId,row.courseNo);
                                    }
                                },
                            ]
                        },
                    ],
                },
                // 二级院校列表
                secondSchoolList: null,
                // 专业列表
                professionList: null,
                // 班级集合
                classList: null,
            }
        },
        created() {
        },
        mounted() {},
        computed: {
            ...mapGetters({
                schoolList: 'getSchoolList',
            })
        },
        methods: {
            // 高级查询方法
            showMoreSearch(){
                if(this.moreSearchDisplay){
                    this.moreSearchDisplay = false
                }else{
                    this.moreSearchDisplay = true
                }

            },
            // 获取二级院系数据
            getSecondSchoolList(schoolId) {
                let vm = this;
                vm.axios.get(api.getSecondSchoolList, {
                    params: {
                        schoolId: schoolId
                    }
                }).then((response) => {
                    if (response.data.success) {
                        this.secondSchoolList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            // 获取专业列表
            getProfessionList(schoolId, secondSchoolId) {
                let vm = this;
                vm.axios.get(api.getProfeesionList, {
                    params: {
                        schoolId: schoolId,
                        secondSchoolId: secondSchoolId
                    }
                }).then((response) => {
                    if (response.data.success) {
                        this.professionList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            // 查询班级列表
            getClassList(professionId){
                let vm = this;
                vm.axios.get(api.getClassList,{
                    params:{
                        professionId: professionId
                    }
                }).then((response) => {
                    if (response.data.success) {
                        this.classList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            changeSchool(schoolId) {
                this.table.queryParams.secondSchoolId = null;
                this.secondSchoolList = [];
                this.table.queryParams.professionId = null;
                this.professionList = [];
                this.table.queryParams.classId = null;
                this.classList = [];
                this.getSecondSchoolList(schoolId);
            },
            changeSecondSchool(secondSchoolId) {
                this.table.queryParams.professionId = null;
                this.professionList = [];
                this.table.queryParams.classId = null;
                this.classList = [];
                this.getProfessionList(this.table.queryParams.schoolId, secondSchoolId);
            },
            changeProfession(professionId) {
                this.table.queryParams.classId = null;
                this.classList = [];
                this.getClassList(professionId);
            },
            queryTable(){
                this.$refs.comprehensiveScoreTable.$emit('vuetable:refresh')
            },
            resetQuery(){
                for(let key in this.table.queryParams){
                    this.table.queryParams[key] = null;
                }
                this.secondSchoolList = [];
                this.professionList = [];
                this.classList = [];
                this.$refs.comprehensiveScoreTable.$emit('vuetable:refresh')
            },
        },
    };
</script>
<style scoped>

</style>